<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script> 

</head>

<!-- Vue中使用组件的三大步骤:
、定义组件(创建组件)、注册组件
、使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue options)时传入的那个options几乎一样，但也有点区别:
区别如下:
1.e1不要写，为什么?- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器.
2.data必须写成函数，为什么?- 避免组件被复用时，数据存在引用关系。备注:使用template可以配置组件结构。
如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册: 靠Vue.component('组件名',组件)
编写组件标签: -->
<school></school>

<body>
    <div id="root">
        <!-- 第三步 引用 -->
        <school></school>
        <hr>
        <student></student>
		
		
    </div>
    <div id="root2">
        <!-- 第三步 引用 -->
        <hello></hello>
    </div>
</body>

<script type="text/javascript">
   Vue.config.productionTip=false;
 
   
   //第一步创建
   let school = Vue.extend({
    template:`
    <div>
        <h1> 名称:{{schoolName}}</h1>
        <h1>地址:{{address}}</h1>
    </div>
    `,
    data() {
        return {
            schoolName:'清华',
            address: '北京'
        }
    }
   })

   let student = Vue.extend({
    template:`
    <div>
        <h1> 名称:{{name}}</h1>
        <h1>年龄:{{age}}</h1>
    </div>
    `,
    data() {
        return {
            name:'JJ',
            age: 18
        }
    }
   })


   let hello = Vue.extend({
    template:`
    <div>
        <h1> 名称:{{name}}</h1>
    </div>
    `,
    data() {
        return {
            name:'helloworld',
        }
    }
   })
   //全局注册
   Vue.component('hello',hello);

    new Vue({
        el:"#root",
        data:{
            opacity:1
        }, 
        //第二步 注册
        components:{
            school,student
        }
        
    })
 
    new Vue({
        el:"#root2"
    })
    
</script>
</html>